<template>
  <div>
    <el-dialog title="订单详情" :visible.sync="show" width="1000px" append-to-body>
      <div>
        <el-form ref="info" :model="info" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="机构名称" prop="institutionName">
                {{ info.institutionName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="取药码" prop="medicationCode">
                {{ info.medicationCode }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="门店名称" prop="storeName">
                {{ info.storeName }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="下单用户" prop="orderingUser">
                {{ info.orderingUser }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单状态" prop="status">
                {{ getStatusName(info.status) }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="phoneNumber">
                {{ info.phoneNumber }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单来源" prop="source">
                {{ sources[info.source] }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="下单时间" prop="orderTime">
                {{ info.orderTime }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="品种数量" prop="varietiesNumber">
                {{ info.varietiesNumber }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="金额" prop="amount">
                {{ info.amount }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出货情况">
                {{ info.totalShipmentQuantity || 0 }}/{{ info.totalOrderQuantity || 0 }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table
          v-if="info.subOrderList"
          :data="info.subOrderList"
          border
          style="width: 100%"
        >
          <el-table-column label="序号" type="index" width="80" align="center" />
          <!-- <el-table-column label="机柜名称" prop="cabinetName" align="center" /> -->
          <el-table-column label="药品分布" align="center">
            <template slot-scope="scope">
              <div v-for="(i, k) in scope.row.retrieveDetailsVos" :key="k">
                {{ i.cabinetName || "--" }}：{{ i.num || 0 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="药品名称"
            prop="medicineVo.medicineName"
            align="center"
          />
          <el-table-column label="条码" prop="medicineVo.barCode" align="center" />
          <el-table-column
            label="生产厂家"
            prop="medicineVo.manufacturer"
            align="center"
          />
          <el-table-column label="数量" prop="orderQuantity" align="center" width="100" />
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getOrder } from "@/api/mc/order";
export default {
  name: "UserForm",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    orderId: {
      type: String,
      default: "",
    },
  },
  computed: {
    show: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  watch: {
    show(val) {
      if (val) {
        this.getInfo();
      }
    },
  },
  data() {
    return {
      info: {},
      statusList: [
        { label: "已下单", value: 1 },
        { label: "已完成", value: 2 },
        { label: "已出错", value: 3 },
        { label: "已取消", value: 4 },
        { label: "正在取药", value: 5 },
      ],
      sources: {
        system: "系统",
        app: "APP",
        1: "美团",
        2: "饿了么",
        3: "京东",
      },
    };
  },
  methods: {
    getInfo() {
      getOrder(this.orderId).then((res) => {
        this.info = res.data;
      });
    },
    // 获取状态名称
    getStatusName(val) {
      let row = this.statusList.find((i) => i.value === val);
      return row ? row.label : "";
    },
  },
};
</script>
